<template>
  <div id="fenxi_zhangdan_leiji">
    <canvas
      id="fenxi_zhangdan_leiji_container"
      style="width: 100%; height: 265px"
    ></canvas>
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
      }"
    >
      分割线
    </van-divider>
    <table id="tab">
      <tbody>
        <tr>
          <td>日均消费</td>
          <td>{{ totalStisticAvg }}元</td>
        </tr>
        <!-- <tr>
          <td>当月消费</td>
          <td>2500.00元</td>
        </tr>
        <tr>
          <td>当月收入</td>
          <td>2500.00元</td>
        </tr> -->
      </tbody>
    </table>
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
      }"
    >
      分割线
    </van-divider>
  </div>
</template>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script>
import F2 from "@antv/f2";
export default {
  name: "fenxi_zhangdan_leiji",
  data() {
    return {
      data: {
        list: [],
      },
      totalStisticAvg: 0,
    };
  },
  props: {
    // 渲染
    xuanran: Boolean,
  },
  mounted() {
    if (this.xuanran) {
      this.init();
    }
  },
  watch: {
    xuanran: function (val) {
      this.init();
    },
  },
  methods: {
    init() {
      this.$api.get(
        "api1",
        "app/zhang-dan/lei-ji-zhi-chu-statistic",
        null,
        (r) => {
          this.data.list = r;
          const chart = new F2.Chart({
            id: "fenxi_zhangdan_leiji_container",
            pixelRatio: window.devicePixelRatio,
          });

          chart.source(this.data.list, {
            sales: {
              tickCount: 5,
              min: 0,
            },
            day: {
              type: "timeCat",
              range: [0, 1],
              tickCount: 3,
            },
          });
          chart.tooltip({
            custom: true,
            showXTip: true,
            showYTip: true,
            snap: true,
            crosshairsType: "xy",
            crosshairsStyle: {
              lineDash: [2],
            },
          });
          chart.axis("day", {
            label: function label(text, index, total) {
              var textCfg = {};
              if (index === 0) {
                textCfg.textAlign = "left";
              } else if (index === total - 1) {
                textCfg.textAlign = "right";
              }
              return textCfg;
            },
          });
          chart.line().position("day*price");
          chart.render();
          // 绘制柱状图文本
          const offset = -10;
          const canvas = chart.get("canvas");
          const group = canvas.addGroup();
          var obj = this.data.list[this.data.list.length - 1];
          const point = chart.getPosition(obj);
          group.addShape("text", {
            attrs: {
              x: point.x - 25,
              y: point.y + offset,
              text: obj.price,
              textAlign: "center",
              textBaseline: "bottom",
              fill: "#808080",
            },
          });
        }
      );

      this.$api.get("api1", "app/zhang-dan/statistic-set", null, (r) => {
        console.log(r);
        this.totalStisticAvg = r.totalStisticAvg;
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
#tab {
  width: 100%;
}
</style>
